import { Table } from 'antd'
import './index.scss'
import { useEffect, useState } from 'react'
import { getMovieListApi } from '@/api'

const dataSource = [
  {
    key: '1',
    no: '1',
    name: '猫和老鼠',
    time: 1939,
    rating: 10,
    count: 999999,
    director: '不知道',
    type: '催泪',
    duration: '很长'
  },
  {
    key: '2',
    no: '2',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  },
  {
    key: '3',
    no: '3',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  },
  {
    key: '4',
    no: '4',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  },
  {
    key: '5',
    no: '5',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  },
  {
    key: '6',
    no: '6',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  },
  {
    key: '7',
    no: '7',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  },
  {
    key: '8',
    no: '8',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  },
  {
    key: '9',
    no: '9',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  },
  {
    key: '10',
    no: '10',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  },
  {
    key: '11',
    no: '11',
    name: '陈真河的爱情故事',
    time: 2025,
    rating: 10,
    count: 9999999,
    director: '陈真河',
    type: '催泪',
    duration: '超级长'
  }
]

const columns = [
  {
    title: '编号',
    dataIndex: 'no',
    key: 'no'
  },
  {
    title: '电影名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '发行时间',
    dataIndex: 'time',
    key: 'time'
  },
  {
    title: '评分',
    dataIndex: 'rating',
    key: 'rating'
  },
  {
    title: '评价人数',
    dataIndex: 'count',
    key: 'count'
  },
  {
    title: '导演',
    dataIndex: 'director',
    key: 'director'
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type'
  }
  // {
  //   title: '时长',
  //   dataIndex: 'duration',
  //   key: 'duration'
  // }
]

function MovieList() {
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    const getMovieList = async () => {
      const res = await getMovieListApi()
      const dataSource = res.data.map((item, index) => ({
        key: index + 1,
        no: index + 1,
        name: item.movie_name,
        time: item.issue_date,
        rating: item.rating_num,
        count: item.comments,
        director: item.director,
        type: item.genre
      }))
      setDataSource(dataSource)
    }
    getMovieList()
  }, [])
  return (
    <>
      <div className="movie-list">
        <h1>电影列表</h1>
        <Table className="list" dataSource={dataSource} columns={columns} />
      </div>
    </>
  )
}

export default MovieList
